<template>
  <a-card>
    <TableSearch
      ref="tableSearch"
      :fields="fields"
      @searchEmit="searchEmit"
      @resetEmit="resetEmit"
      :isRefreshBtn="false"
      @refreshEmit="$refs.table.refresh()"
      :toolSettings="toolSettings"
    />
    <s-table
      ref="table"
      rowKey="uuid"
      :size="tableSize"
      :columns="columns"
      :data="tableData"
      :scroll="{ x: 1000 }"
    >
      <template slot="avatar" slot-scope="text">
        <a-avatar v-if="text" :src="formatUrl(text)" shape="square" :size="64" />
        <a-avatar v-else icon="user" shape="square" :size="64" />
      </template>
      <template slot="gender" slot-scope="text">
        <a-icon v-if="text == 1" type="man" style="fontSize: 20px;color: #0091ff" />
        <a-icon v-else-if="text == 2" type="woman" style="fontSize: 20px;color: #ff4d94" />
        <span v-else>未知</span>
      </template>
      <template slot="role" slot-scope="text">
        <span v-if="text == 0">超级管理员</span>
        <span v-else>普通用户</span>
      </template>
      <template slot="status" slot-scope="text">
        <a-tag v-if="text == 1" color="#52c41a">正常</a-tag>
        <a-tag v-else>禁用</a-tag>
      </template>
      <template slot="o" slot-scope="text, record">
        <a-button @click="edit(record)" type="link" size="small">编辑</a-button>
        <a-button v-if="record.role == 0" type="link" size="small">重置密码</a-button>
        <a-popconfirm
          title="确定删除该用户吗?"
          ok-text="确定"
          cancel-text="取消"
          @confirm="deleteUser(record)"
        >
          <a-button v-if="record.role != 0" :loading="record.loading" type="link" size="small">删除</a-button>
        </a-popconfirm>
      </template>
    </s-table>
    <UserForm ref="UserForm" />
  </a-card>
</template>

<script>
import { TableSearch, STable } from '@/components'
import { getUserListAPI, addUserAPI, editUserAPI, deleteUserAPI } from '@/api/user'
import { searchEmit, resetEmit } from '@/views/biz/common'
import UserForm from './modules/UserForm.vue'

export default {
  components: { TableSearch, STable, UserForm },
  data () {
    return {
      toolSettings: [
        { text: '创建用户账号', icon: 'plus', type: 'primary', click: () => { this.add() } }
      ],
      fields: [
        { field: 'username', type: 'input', label: '用户账号', value: '', placeholder: '请输入账号' },
        { field: 'gender', type: 'select', label: '性别', value: undefined, placeholder: '请选择性别', options: [{ label: '男', value: 1 }, { label: '女', value: 2 }, { label: '未知', value: 0 }] },
        { field: 'nickname', type: 'input', label: '用户昵称', value: '', placeholder: '请输入用户昵称' },
        // { field: 'realname', type: 'input', label: '真实姓名', value: '', placeholder: '请输入' },
        { field: 'phone', type: 'input', label: '手机号码', value: '', placeholder: '请输入手机号码' },
        // { field: 'email', type: 'input', label: '邮箱', value: '', placeholder: '请输入' },
        { field: 'role', type: 'select', label: '角色', value: undefined, placeholder: '请选择角色', options: [{ label: '超级管理员', value: 0 }, { label: '普通用户', value: 1 }] },
        // { field: 'status', type: 'select', label: '状态', value: undefined, placeholder: '请选择', options: [{ label: '正常', value: 1 }, { label: '禁用', value: 0 }] },
        // { field: 'range-startTime-endTime', type: 'range', label: '创建时间', value: [], placeholder: '请选择' }
      ],
      columns: [
        { title: 'UUID', dataIndex: 'uuid', width: 150, ellipsis: true },
        { title: 'WX-OPENID', dataIndex: 'openId', width: 150, ellipsis: true },
        { title: '用户账号', dataIndex: 'username', width: 120 },
        { title: '头像照片', dataIndex: 'avatar', width: 100, align: 'center', scopedSlots: { customRender: 'avatar' } },
        { title: '性别', dataIndex: 'gender', width: 60, align: 'center', scopedSlots: { customRender: 'gender' } },
        { title: '用户昵称', dataIndex: 'nickname', width: 100 },
        // { title: '真实姓名', dataIndex: 'realname', width: 100 },
        { title: '手机号码', dataIndex: 'phone', width: 120, align: 'center' },
        { title: '邮箱地址', dataIndex: 'email', width: 140, scopedSlots: { customRender: 'email' } },
        { title: '角色', dataIndex: 'role', width: 100, align: 'center', scopedSlots: { customRender: 'role' } },
        { title: '状态', dataIndex: 'status', width: 100, align: 'center', scopedSlots: { customRender: 'status' } },
        { title: '备注', dataIndex: 'note', width: 200, ellipsis: true },
        { title: '最后登录时间', dataIndex: 'lastTime', width: 150, align: 'center' },
        { title: '创建时间', dataIndex: 'createTime', width: 150, align: 'center' },
        { title: '更新时间', dataIndex: 'updateTime', width: 150, align: 'center' },
        { title: '其他操作', dataIndex: 'operation', align: 'center', width: 180, scopedSlots: { customRender: 'o' }, fixed: 'right' }
      ],
      tableData: query => {
        return getUserListAPI(Object.assign(query, this.params))
      },
      params: {
        username: '',
        gender: undefined,
        nickname: '',
        realname: '',
        phone: '',
        email: '',
        role: undefined,
        status: undefined,
        startTime: '',
        endTime: ''
      }
    }
  },
  methods: {
    searchEmit,
    resetEmit,
    /** @name 添加用户 **/
    add () {
      this.$refs.UserForm.open('添加用户', null, (form, done) => {
        addUserAPI(form).then(() => {
          this.$refs.table.refresh(true)
          this.$message.success('添加成功')
          done(true)
        }).finally(() => {
          done(false)
        })
      })
    },
    /** @name 编辑用户 **/
    edit (record) {
      this.$refs.UserForm.open('编辑用户', this.deepClone(record), (form, done) => {
        editUserAPI({
          ...form,
          uuid: record.uuid
        }).then(() => {
          this.$refs.table.refresh()
          this.$message.success('编辑成功')
          done(true)
        }).finally(() => {
          done(false)
        })
      })
    },
    /** @name 删除用户 **/
    deleteUser (record) {
      this.$set(record, 'loading', true)
      deleteUserAPI({ uuid: record.uuid }).then(() => {
        this.$refs.table.refresh(true)
        this.$message.success('删除成功')
      }).finally(() => {
        this.$set(record, 'loading', false)
      })
    }
  }
}
</script>
